/*
 * **************************************************
 * author 陈学龙（grayVTouch） 2018-01-26 15:27:00

 * 图片预览
 * ***************************************************
 */
.pic-show {
	width:100%;
	height:100%;
}

.pic-show .preview , .pic-show .index {

}

/**
 * *************
 * 预览图
 * *************
 */
.pic-show .preview {
	overflow:hidden;
	position:relative;
}

.pic-show .preview .content {
	height:100%;
}

.pic-show .preview .content .list {
	height:100%;
	position: relative;
	left:0px;
}

.pic-show .preview .content .list:after {
	display:block;
	content:'';
	clear:both;
}

.pic-show .preview .content .list .link {
	float:left;
	height: 100%;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-ms-box-sizing:border-box;
	-o-box-sizing:border-box;
}

.pic-show .preview .content .list .link .image {
	width: 100%;
	min-height: 100%;
}

.pic-show .preview .btn {
	position:absolute;
	top:50%;
	width:50px;
	height:60px;
	text-align:center;
	line-height:60px;
	background-color:black;
	opacity:0.4;
	cursor:pointer;
	transition:all 0.3s linear;
	-webkit-transition:all 0.3s linear;
	-moz-transition:all 0.3s linear;
	-ms-transition:all 0.3s linear;
	-o-transition:all 0.3s linear;
}

.pic-show .preview .btn:hover {
	opacity:0.7;
}

.pic-show .preview .btn .image{
	width:30px;
	height:30px;
	vertical-align: middle;
}

.pic-show .preview:hover .btn  {
	transform:translate3d(0% , -50% , 0);
	-webkit-transform:translate3d(0% , -50% , 0);
	-moz-transform:translate3d(0% , -50% , 0);
	-ms-transform:translate3d(0% , -50% , 0);
	-o-transform:translate3d(0% , -50% , 0);
}

.pic-show .preview .prev {
	left:0px;
	transform:translate3d(-100% , -50% , 0);
	-webkit-transform:translate3d(-100% , -50% , 0);
	-moz-transform:translate3d(-100% , -50% , 0);
	-ms-transform:translate3d(-100% , -50% , 0);
	-o-transform:translate3d(-100% , -50% , 0);
}

.pic-show .preview .next {
	right:0px;
	transform:translate3d(100% , -50% , 0);
	-webkit-transform:translate3d(100% , -50% , 0);
	-moz-transform:translate3d(100% , -50% , 0);
	-ms-transform:translate3d(100% , -50% , 0);
	-o-transform:translate3d(100% , -50% , 0);
}

/**
 * *************
 * 索引
 * *************
 */
.pic-show .index {

}

.pic-show .index:after {
	display:block;
	content:'';
	clear:both;
}

.pic-show .index > * {
	float:left;
	height:100%;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-o-box-sizing:border-box;
	-ms-box-sizing:border-box;
}


/**
 * **************
 * 索引：小图预览
 * **************
 */
.pic-show .index .small {
	overflow:hidden;
}

.pic-show .index .small .list {
	position:relative;
	left:0px;
	height:100%;
	margin:0px;
}

.pic-show .index .small .list:after {
	display:block;
	content:'';
	clear:both;
}

.pic-show .index .small .list .item {
	float:left;
	height:100%;
	position:relative;
	overflow:hidden;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-o-box-sizing:border-box;
	-ms-box-sizing:border-box;
	border: 2px solid transparent;
	transition:all 0.3s linear;
	-webkit-transition:all 0.3s linear;
	-moz-transition:all 0.3s linear;
	-o-transition:all 0.3s linear;
	-ms-transition:all 0.3s linear;
	cursor:pointer;
}

/*
.pic-show .index .small .list .item:hover {
	border-color:#e53e41;
}
*/

.pic-show .index .small .list .cur {
	border-color:#e53e41;
}

.pic-show .index .item .image{
	width:100%;
	min-height:100%;
	vertical-align:top;
	position:absolute;
	left:50%;
	top:50%;
	vertical-align:top;
	transform:translate(-50% , -50%);
	-webkit-transform:translate(-50% , -50%);
	-moz-transform:translate(-50% , -50%);
	-o-transform:translate(-50% , -50%);
	-ms-transform:translate(-50% , -50%);
}

/**
 * **************
 * 索引按钮
 * **************
 */
.pic-show .index .btn {
	width:30px;
	height:100%;
	opacity:0.6;
	position:relative;
	transition:all 0.3s linear;
	-webkit-transition:all 0.3s linear;
	-moz-transition:all 0.3s linear;
	-ms-transition:all 0.3s linear;
	-o-transition:all 0.3s linear;
}

.pic-show .index .prev:hover , .pic-show .index .next:hover {
	opacity:1;
}

.pic-show .index .prev .image , .pic-show .index .next .image {
	width: 25px;
	height: 25px;
	position:absolute;
	left:50%;
	top:50%;
	transform:translate3d(-50% , -50% , 0);
	-webkit-transform:translate3d(-50% , -50% , 0);
	-moz-transform:translate3d(-50% , -50% , 0);
	-ms-transform:translate3d(-50% , -50% , 0);
	-o-transform:translate3d(-50% , -50% , 0);
}

.pic-show .index .prev {

}

.pic-show .index .next {

}

